<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
		<title>XMLHttpRequest模拟Form表单发送数据</title>
		<style>
           body{
           	font-family: "微软雅黑";
           	font-size: 16px;
           }
           input{
           	  width: 200px;
           	  height: 20px;
           	  font-size: 18px;
           }
           input[type='submit']{
           	margin: 0 auto;
           	background-color: #f54337;
           	width: 90%;
           	height: 44px;
           	border: 0;
           	font-size: 18px;
			font-family: "Microsoft YaHei","微软雅黑";
			color: #fff;
           }
           .container{
           	text-align: center;
           }
           .container a{
				background-color: #f54337;
				width: 90%;
				height: 44px;
				float: left;
				margin-top: 10px;
				text-decoration: none;
				color: #fff;
				line-height: 44px;
				font-size: 18px;
				font-family: "Microsoft YaHei","微软雅黑";
			}
			fieldset{
				padding-left: 40px;
			}
		</style>
	</head>
	<body>
		<form method="post" action="http://www.meishihui68.com.cn/FormAjax.ashx">
			<fieldset>
				<legend>健康信息</legend>
				身高: <input type="text" name="myheight" id="myheight"/>cm<br/><br/>
				体重: <input type="text" name="myweight" id="myweight"/>kg<br /><br />
				<input type="submit" value="表单提交"/>
				<div class="container">
				<a href="javascirpt:void(0);" id="btnGet">XMLHttpRequest GET提交</a>
			</div>
			<div class="container">
				<a href="javascirpt:void(0);" id="btnPost">XMLHttpRequest POST提交</a>
			</div>
			</fieldset>
		</form>
		<script>
		    var heig=document.getElementById("myheight");
		    var wei=document.getElementById("myweight");
			var xhr = new XMLHttpRequest();
			document.getElementById('btnGet').addEventListener('click',function () {
			    PostDataToServer("GET");
			});
			document.getElementById('btnPost').addEventListener('click',function () {
			    PostDataToServer("POST");
			});
			
			
			function PostDataToServer(type){
			   var data=heig.name+"="+heig.value+"&"+wei.name+"="+wei.value;
			   var url="http://www.meishihui68.com.cn/FormAjax.ashx";
			   url=type=="GET"?url=url+"?"+data:url;
			   xhr.open(type,url,true);
			   xhr.onreadystatechange=function(){
			   	   if(xhr.readyState==4){
			   	   	   if(xhr.status==200){
			   	   	   	  alert(xhr.responseText);
			   	   	   }
			   	   }
			   }
			   if(type=="GET"){
			   	  xhr.send(null);
			   }else if(type=="POST"){
			   	  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			   	  xhr.send(data);
			   }		   
			}		
		</script>
	</body>
</html>